<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>库存分析 -- 商品维度</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css">
    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet" />
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<button style="position: absolute; top: 5px;right: 20px;"
        class="btn btn-info" onclick="javascript:window.history.go(-2);window.close();">返回</button>

<div class="container-fluid" id="app">
    <form class="form-inline" style="margin-top: 50px; margin-bottom: 5px;">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="quXianNameInput" onfocus="this.value=''"  class="form-control input-sm" type="text" placeholder="区县名称">
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
            <div class="form-group">
                <input id="channelNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="渠道名称">
            </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="客户经理名称">
            </div>
        </shiro:lacksPermission>

        <div class="form-group">
            <input id="custNameInput" class="form-control input-sm" type="text" placeholder="客户名称">
        </div>
        <div class="form-group">
            <select class="form-control input-sm" id="isExp">
                <option value="-1">--是否试点--</option>
                <option value="是">是</option>
                <option value="否">否</option>
            </select>
        </div>
        <div class="form-group">
            <input id="orderLevelInput" class="form-control input-sm" type="text" placeholder="客户档位">
        </div>
        <div class="form-group">
            <input id="baseTypeNameInput" class="form-control input-sm" type="text" placeholder="业态分布">
        </div>
        <div class="form-group">
            <input id="cityTypeInput" class="form-control input-sm" type="text" placeholder="经营类型">
        </div>
        <div class="form-group">
            <input id="priceTypeInput" class="form-control input-sm" type="text" placeholder="价类">
        </div>
        <div class="form-group input-group">
            <input id="prodNameInput" class="form-control input-sm" readonly  type="text" placeholder="未选择品规">
            <span class="input-group-btn">
				<button type="button" class="btn btn-default btn-sm" title="选择商品作为查询条件" onclick="javascript:$('#gridSystemModal').modal('show');">选择</button>
			</span>
        </div>
        <div class="form-group">
            <input id="beginOperatorTimeInput" class="form-control input-sm"   type="text" placeholder="请选择开始时间">
        </div>
        <div class="form-group">
            <input id="endOperatorTimeInput" class="form-control input-sm"   type="text" placeholder="请选择结束时间">
        </div>
        <div class="form-group">
            <select class="form-control input-sm" title="排序方式" id="orderByNameInput">
                <%--<option value="CUST_CODE">商品条码</option>--%>
                <option value="CUST_NAME">商品名称</option>
                <option value="LAST_INVENTORY">上期库存</option>
                <option value="PERIOD_ORDER_QUANTITY">期间订货量</option>
                <option value="PERIOD_SCAN_QUANTITY">期间扫码销售量</option>
                <option value="CURRENT_INVENTORY" selected>本期库存</option>
               <%-- <option value="STOCK_TO_SALES">存销比</option>--%>
            </select>
            <select class="form-control input-sm" id="orderByTypeInput">
                <option value="ASC">正序</option>
                <option value="DESC" selected>倒序</option>
            </select>
        </div>
        <button type="button" class="btn btn-sm btn-success" @click="getOrder(1);">查询</button>
        <button type="button" title="根据查询条件导出所有记录" onclick="exportExcel();"
                class="btn btn-sm btn-info">导出Excel
        </button>
    </form>
    <div class="row" style="background-color: #0c3166;margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px;color: #f9f9f9;">商品维度-库存分析</strong>
        </div>
        <div class="col-sm-2" style="text-align: right">

        </div>
    </div>
    <div class="table-responsive" id="tableContainer" style="font-size: 18px;">
        <table class="table table-striped table-condensed table-bordered">
            <thead style="background-color:#eee;">
            <tr>
                <%--<th>商品条码</th>--%>
                <th>商品名称</th>
                <th>上期库存(条)</th>
                <th>期间订货量(条)</th>
                <th>期间扫码销售量(条)</th>
                <th>本期库存(条)</th>
               <%-- <th>存销比</th>--%>
            </tr>
            </thead>
            <tbody>

            <tr v-for="order in orderList">
                <%--<td>{{order.CUST_CODE}}</td>--%>
                <td>{{order.CUST_NAME}}</td>
                <td>{{order.LAST_INVENTORY > 0 ?  order.LAST_INVENTORY : 0}}</td> <!-- queryLastInventory(order.CURRENT_INVENTORY,order.PERIOD_ORDER_QUANTITY,order.PERIOD_SCAN_QUANTITY) -->
                <td>{{order.PERIOD_ORDER_QUANTITY}}</td>
                <td>{{order.PERIOD_SCAN_QUANTITY}}</td>
                <td>{{order.CURRENT_INVENTORY}}</td>
               <%-- <td>{{order.STOCK_TO_SALES}}</td>--%>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: right;margin-top: 10px;" id="pageDiv"></div>

</div>
<form action="${contextPath}/page/stockAnalyzeExportExcel" method="post" id="exportExcel" style="display:none">
    <input type="hidden" name="productCode"  id="exportExcelParamProductCode">
    <input type="hidden" name="beginOperatorTime" id="exportExcelParamBOperatorTime">
    <input type="hidden" name="endOperatorTime" id="exportExcelParamEOperatorTime">
    <input type="hidden" name="quXianName" id="exportExcelParamQuXianName">
    <input type="hidden" name="channelName" id="exportExcelParamChannelName">
    <input type="hidden" name="empName" id="exportExcelParamEmpName">
    <input type="hidden" name="custName" id="exportExcelParamCustName">
    <input type="hidden" name="isExp" id="exportExcelParamisExp">
    <input type="hidden" name="orderLevel" id="exportExcelParamisOrderLevel">
    <input type="hidden" name="baseTypeName" id="exportExcelParamisBaseTypeName">
    <input type="hidden" name="cityType" id="exportExcelParamisCityType">
    <input type="hidden" name="priceType" id="exportExcelParamisPriceType">

    <input type="hidden" name="orderByName" id="exportExcelParamisOrderByName">
    <input type="hidden" name="orderByType" id="exportExcelParamisOrderByType">
    <input type="hidden" name="tableType" value="product">
</form>


<div class="modal fade" tabindex="-1" role="dialog" id="gridSystemModal" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">选择品规</h4>
            </div>
            <div class="modal-body">
                <div class="content_wrap">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="selectProductTreeNames();">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script type="text/javascript">
    var laypage = layui.laypage
        , layer = layui.layer;

    var app = new Vue({
        el: '#app',
        data: {
            orderList: [],
            queryModel: {
                stringMap: {
                    page: 1,
                    productCode:"",
                    beginOperatorTime:"",
                    endOperatorTime:"",
                    quXianName:'',
                    channelName:'',
                    empName:'',
                    custName:'',
                    isExp : '',
                    orderLevel :'',
                    baseTypeName :'',
                    cityType :'',
                    type: 'product',
                    orderByName:'',
                    orderByType:'',
                    priceType : '',
                },

            },
        },
        methods: {
            getOrder: function (page) {
                layer.load(1)
                app.queryModel.stringMap.page = page;

                var quXianName = $("#quXianNameInput").val();
                var channelName = $("#channelNameInput").val();
                var empName = $("#empNameInput").val();
                var custName = $("#custNameInput").val();
                var isExp = $("#isExp").val();
                var orderLevel = $("#orderLevelInput").val();
                var baseTypeName = $("#baseTypeNameInput").val();
                var cityType = $("#cityTypeInput").val();
                var priceType = $("#priceTypeInput").val();

                var orderByName = $("#orderByNameInput").val();
                var orderByType = $("#orderByTypeInput").val();

                app.queryModel.stringMap.quXianName =quXianName;
                app.queryModel.stringMap.channelName = channelName;
                app.queryModel.stringMap.empName = empName;
                app.queryModel.stringMap.custName = custName;
                app.queryModel.stringMap.isExp = isExp;
                app.queryModel.stringMap.orderLevel = orderLevel;
                app.queryModel.stringMap.baseTypeName = baseTypeName;
                app.queryModel.stringMap.cityType = cityType;
                app.queryModel.stringMap.priceType = priceType;

                app.queryModel.stringMap.orderByName = orderByName;
                app.queryModel.stringMap.orderByType = orderByType;

                $.ajax({
                    url: '${contextPath}/page/getStockAnalyze',
                    type: 'post',
                    data: app.queryModel,
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success == false) {
                            layer.msg("获取出错：" + data.message)
                            return
                        }
                        //console.log(data)
                        var rData = data.data;
                        var dataArray = rData.recordList;
                        if (dataArray.length == 0) {
                            layer.msg("查询没有数据")
                        }
                        app.orderList = dataArray
                        laypage({
                            cont: 'pageDiv'
                            , pages: rData.pageCount //总页数
                            , groups: 5 //连续显示分页数
                            , curr: rData.currentPage
                            , skin: '#1E9FFF',
                            jump: function (obj, first) {
                                var curr = obj.curr;
                                if (!first) {
                                    app.getOrder(curr)
                                }
                            }
                        });
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg('网络错误');
                        //console.log(error)
                    }
                })
            },
            queryLastInventory : function (num1,num2,num3) {
                var rs = num1-num2+num3;
                if (rs <= 0 ) {
                    return 0;
                }
                if (rs.toString().indexOf(".")>0) {
                    return rs.toFixed(1);
                }
                return rs;
            }

        }
    })



    var day1 = new Date();
    day1.setTime(day1.getTime()-24*60*60*1000);

    var year = day1.getFullYear();
    var month = day1.getMonth() + 1 ;
    if (month < 10) {
        month = '0' + month
    }
    var defauteBeginDate = year + '-' + month +'-01';

    $('#beginOperatorTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 0,
        autoclose: 1,
        todayHighlight: 0,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
        //startDate:new Date(),
        endDate : day1,
    });

    $('#endOperatorTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 0,
        autoclose: 1,
        todayHighlight: 0,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
        //startDate:new Date(),
        endDate : day1,
    });

    $("#beginOperatorTimeInput").on("change",function () {
        app.queryModel.stringMap.beginOperatorTime = this.value
    });

    $("#beginOperatorTimeInput").val(defauteBeginDate);
    app.queryModel.stringMap.beginOperatorTime = defauteBeginDate;

    $("#endOperatorTimeInput").on("change",function () {
        app.queryModel.stringMap.endOperatorTime = this.value
    });

    app.getOrder(1);
    var exportExcel = function () {

        var quXianName = $("#quXianNameInput").val();
        var channelName = $("#channelNameInput").val();
        var empName = $("#empNameInput").val();
        var custName = $("#custNameInput").val();
        var isExp = $("#isExp").val();
        var orderLevel = $("#orderLevelInput").val();
        var baseTypeName = $("#baseTypeNameInput").val();
        var cityType = $("#cityTypeInput").val();
        var priceType = $("#priceTypeInput").val();

        var orderByName = $("#orderByNameInput").val();

        var orderByType = $("#orderByTypeInput").val();
        app.queryModel.stringMap.quXianName =quXianName;
        app.queryModel.stringMap.channelName = channelName;
        app.queryModel.stringMap.empName = empName;
        app.queryModel.stringMap.custName = custName;
        app.queryModel.stringMap.isExp = isExp;

        app.queryModel.stringMap.orderLevel = orderLevel;
        app.queryModel.stringMap.baseTypeName = baseTypeName;
        app.queryModel.stringMap.cityType = cityType;
        app.queryModel.stringMap.priceType = priceType;

        app.queryModel.stringMap.orderByName = orderByName;
        app.queryModel.stringMap.orderByType = orderByType;


        if (!app.queryModel.stringMap.productCode && !app.queryModel.stringMap.beginOperatorTime && !app.queryModel.stringMap.endOperatorTime) {
            //layer.msg("请选择导出条件");
            //return;
        }
        $("#exportExcelParamProductCode").val(app.queryModel.stringMap.productCode);
        $("#exportExcelParamBOperatorTime").val(app.queryModel.stringMap.beginOperatorTime);
        $("#exportExcelParamEOperatorTime").val(app.queryModel.stringMap.endOperatorTime);
        $("#exportExcelParamQuXianName").val(app.queryModel.stringMap.quXianName);
        $("#exportExcelParamChannelName").val(app.queryModel.stringMap.channelName);
        $("#exportExcelParamEmpName").val(app.queryModel.stringMap.empName);
        $("#exportExcelParamCustName").val(app.queryModel.stringMap.custName);
        $("#exportExcelParamisExp").val(app.queryModel.stringMap.isExp);
        $("#exportExcelParamisOrderLevel").val(app.queryModel.stringMap.orderLevel);
        $("#exportExcelParamisBaseTypeName").val(app.queryModel.stringMap.baseTypeName);
        $("#exportExcelParamisCityType").val(app.queryModel.stringMap.cityType);
        $("#exportExcelParamisPriceType").val(app.queryModel.stringMap.priceType);

        $("#exportExcelParamisOrderByName").val(app.queryModel.stringMap.orderByName);
        $("#exportExcelParamisOrderByType").val(app.queryModel.stringMap.orderByType);
        layer.msg("导出请求已提交，请等待结果")

        $("#exportExcel").submit();
    }


    $.ajax({
        url : '${contextPath}/page/getProductThreeName',
        success : function (data) {
            if(data.success){
                var zNodes = data.data;

                var setting = {
                    check: {
                        enable: true,
                        chkStyle: "checkbox",
                    },

                    data: {
                        simpleData: {
                            enable: true ,
                            idKey: "ID",
                            pIdKey: "PID",
                            rootPId: '0',
                        },
                        key: {
                            name: "NAME"
                        },
                    },
                };

                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            }
        }
    })

    var selectProductTreeNames = function () {
        $("#gridSystemModal").modal('hide')
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes =  zTree.getCheckedNodes();
        app.queryModel.stringMap.productCode = ""
        if (nodes.length == 0) {
            $("#prodNameInput").val("")
            return
        }
        var length = 0;
        for (var index in nodes) {
            var node = nodes[index]
            if (node.ISPRODNAME) {
                app.queryModel.stringMap.productCode = "'"+node.ID+"',"+app.queryModel.stringMap.productCode
                length++;
            }
        }
        app.queryModel.stringMap.productCode = app.queryModel.stringMap.productCode.substr(0,app.queryModel.stringMap.productCode.length-1)
        $("#prodNameInput").val("已选择"+length+"条品规")
    }


    var selectOrderLevelToSelected = function () {
        $.ajax({
            url: '${contextPath}/checking/selectOrderLevelToSelected',
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#orderLevelInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        //width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    };
    selectOrderLevelToSelected();

    var selectBaseTypeNameToSelected = function () {
        $.ajax({
            url: '${contextPath}/checking/selectBaseTypeNameToSelected',
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#baseTypeNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        //width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    };
    selectBaseTypeNameToSelected();

    var selectCityTypeToSelected = function () {
        $.ajax({
            url: '${contextPath}/checking/selectCityTypeToSelected',
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#cityTypeInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        //width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    };
    selectCityTypeToSelected();

    var selectPriceTypeToSelected = function (nodeSelect) {
        $(nodeSelect).autocomplete({
            lookup: [{data:'一类', value:'一类'},{data:'二类', value:'二类'},{data:'三类', value:'三类'},{data:'四类', value:'四类'},{data:'五类', value:'五类'},{data:'无价类', value:'无价类'}],
            onSelect: function (suggestion) {
                //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
            },
            //width: 200,
            minChars: 0,
        });
    };

    selectPriceTypeToSelected('#priceTypeInput')

    var selectcustNameToSelected = function (empName) {
        $.ajax({
            url: '${contextPath}/page/selectCustNameToSelected?empName=' + empName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#custNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        minChars: 0,
                    });
                }
            }
        })
    };

    selectcustNameToSelected('')

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">



    var selectEmpNameToSelected = function (channelName) {
        $.ajax({
            url: '${contextPath}/checking/selectEmpNameToSelected?channelName=' + channelName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#empNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            selectcustNameToSelected(suggestion.value)
                        },
                        width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    }
    selectEmpNameToSelected('')

    var selectChannelNameToSelected = function (quXianName) {
        $.ajax({
            url: '${contextPath}/checking/selectChannelNameToSelected?quXianName=' + quXianName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#channelNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                            selectEmpNameToSelected(suggestion.value)
                        },
                        width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    }
    selectChannelNameToSelected('')
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    $.ajax({
        url: '${contextPath}/checking/selectQuXianNameToSelected',
        success: function (data) {
            if (data.success) {
                var countries = data.data
                $('#quXianNameInput').autocomplete({
                    lookup: countries,
                    onSelect: function (suggestion) {
                        //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        selectChannelNameToSelected(suggestion.value)
                    },
                    width: 200,
                    minChars: 0,
                });
            }
        }
    })
    </shiro:hasPermission>
    </shiro:lacksPermission>
</script>
</html>





